<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar :placeholder="true" :autoBack="true" title="个人资料"></u-navbar>
		<view class="bg-white flex align-center justify-center padding-lg">
			<view class="avatarUrl-box">
				<image :src="avatarUrl" mode="scaleToFill" class="avatarUrl-img">
				</image>
				<button class="img-box-txt" open-type="chooseAvatar" v-on:chooseavatar="onChooseAvatar">
					修改头像
				</button>
			</view>
		</view>
		<view class="margin-sm bg-white padding-sm">
			<view class="flex justify-between">
				<view class="flex align-center justify-start">
					<text>昵称</text>
					<text class="margin-left-lg">{{nickName}}</text>
				</view>
				<view @click="editNickName(info.nickName)" class="cuIcon-right"></view>
			</view>
			<u-line dashed margin="10px 0px 10px 0"></u-line>
			<view class="flex align-center justify-between">
				<!-- 				<view>
					<text>手机</text>
					<input class="phone" type="text" v-model="phone" placeholder="请输入手机号码" @blur="validatePhone" />
				</view> -->
				<view class="flex align-center justify-start">
					<text>手机</text>
					<input class="margin-left-lg" type="text" v-model="phone" placeholder="请输入手机号码"
						@blur="validatePhone" />
				</view>
				<!-- 				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					class="cu-btn sm bg-blue">更换手机号</button> -->
			</view>
		</view>
		<view class="flex align-center justify-center margin-top-xl">
			<button @click="showModal=true" class="bg-red  cu-btn lg" style="width: 90%;">退出登录</button>
		</view>
		<u-modal :show="showModal" title="提示" content="确认要退出登录么？" showCancelButton @cancel="showModal=false"
			@confirm="logOut"></u-modal>
	</view>
</template>

<script>
	import {
		upload,
		url,
		updatauserbyurl,
		upadatauserbyname,
		updatauserbyphone
	} from '@/request/api_user.js'
	export default {
		data() {
			return {
				info: {},
				avatarUrl: '',
				nickName: '',
				phone: '',
				showModal: false
			}
		},
		onLoad() {
			//this.info = uni.getStorageSync('UserInfo').user;
			let vm = uni.getStorageSync('UserInfo');
			this.avatarUrl = url() + vm.avatarUrl
			this.nickName = vm.nickname
			this.phone = vm.phone
		},
		created() {
			let app = getApp();
			app.getUserInfo();
		},
		methods: {
			validatePhone() {
				let vm = uni.getStorageSync('UserInfo');
				// 简单的手机号码验证规则
				const phoneRegex = /^1[3-9]\d{9}$/; // 正则表达式，匹配中国大陆的手机号码
				if (!phoneRegex.test(this.phone)) {
					this.phone = ''
					// 如果手机号码不符合规则，显示错误信息
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号码'
					});
				} else {
					updatauserbyphone({
						"id": vm.id,
						"phone": this.phone
					})
					vm.phone = this.phone;
					uni.setStorage({
						key: "UserInfo",
						data: vm
					});
				}
			},
			onChooseAvatar(e) {
				let that = this
				uni.showLoading();
				uni.uploadFile({
					url: url() + 'img/upload', // 后端接口地址
					filePath: e.detail.avatarUrl, // 文件路径
					name: 'file', // 后端接收文件的字段名
					success: (uploadFileRes) => {
						// 上传成功的处理
						let vm = uni.getStorageSync('UserInfo');
						// 假设后端返回的文件路径在data.data.targetPath
						const response = JSON.parse(uploadFileRes.data);
						that.avatarUrl = url() + response.data.targetPath
						vm.avatarUrl = response.data.targetPath;
						uni.setStorage({
							key: "UserInfo",
							data: vm
						});
						updatauserbyurl({
							"id": vm.id,
							"url": response.data.targetPath
						}).then((req) => {

						})
						uni.hideLoading();
					},
					fail: (error) => {
						// 上传失败的处理
						console.error(error);
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '上传失败'
						});
					}
				});
			},
			//更新用户手机号
			// getPhoneNumber(e) {
			// 	if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
			// 		this.getPhoneLoading = false;
			// 		this.$refs.uToast.show({
			// 			message: '获取手机号失败！',
			// 			type: 'error',
			// 			position: 'top'
			// 		});
			// 		return;
			// 	} else {
			// 		let that = this;
			// 		let vm = uni.getStorageSync('UserInfo');
			// 		uni.showLoading();
			// 		uni.$u.http.post('/Customer/GetPhoneNumber', {
			// 			id: vm.user.userid,
			// 			entrydata: e.detail.encryptedData,
			// 			iv: e.detail.iv
			// 		}).then(res => {
			// 			that.$refs.uToast.show({
			// 				message: '更新成功',
			// 				type: 'success',
			// 				position: 'top'
			// 			});
			// 			that.info.phone = res.data;
			// 			vm.user.phone = res.data;
			// 			uni.setStorage({
			// 				key: "UserInfo",
			// 				data: vm
			// 			});
			// 		})
			// 	}
			// },
			editNickName(nickname) {

				console.log(1)
				uni.navigateTo({
					url: '/pages/user/user/editnickname?nickname=' + this.nickName,
				})
			},

			logOut() {
				uni.setStorage({
					key: "UserInfo",
					data: null
				});
				this.$u.vuex('UserInfo', null);
				uni.switchTab({
					url: '/pages/index/storeindex'
				})
			}

		}
	}
</script>

<style scoped>
	.avatarUrl-box {
		width: 200rpx;
		height: 200rpx;
		border-radius: 200rpx;
		overflow: hidden;
		position: relative;
	}

	.avatarUrl-img {
		width: 200rpx;
		height: 200rpx;
	}


	.img-box-txt {
		height: 40rpx;
		font-size: 20rpx;
		width: 100%;
		background: #999;
		color: #fff;
		position: absolute;
		bottom: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.avatarUrl-bottom {
		background: #999;
		position: relative;
		bottom: 0px;
		width: 100%;
		height: 30px;
	}
</style>